<template>
    <view class="app-goods-list">
        <view class="goods-list" :style="[goodsListStyle]" :class="listClass" v-if="newData.length > 0">
            <!-- 列表模式 -->
            <template v-if="listStyle === -1">
                <block v-for="(goods, index) in newData" :key="index">
                    <view
                        :style="[{'background-color':`${goodsStyle != 3 ? '#fff' : ''}`}, sBorder]"
                        class="goods-item app-list-mode dir-left-nowrap" @click="jump(goods)"
                        :class="goodsStyle === 3 ? 'no-border' : goodsStyle === 2 ? 'border' : ''">

                        <!-- 售罄 -->
                        <view :style="[{'border-radius': `${sGoodsPic.borderRadius}`, 'border-top-left-radius': showGoodsTag ? (goodsBorderColor ? `${cBorderTop}rpx` : 0) : `${cBorderTop}rpx`}]" class="out-dialog"
                              v-if="(goods.goods_stock == 0 || (goods.goods && goods.goods.goods_stock == 0)) && appSetting.is_show_stock == '1'">
                            <image :style="[{'border-radius': `${sGoodsPic.borderRadius}`}]"
                                   :src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
                        </view>

                        <view class="box-grow-0">
                            <app-image
                                v-if="sign === 'advance'"
                                :borderRadius="sGoodsPic.borderRadius"
                                :img-src="goods.goods.goodsWarehouse.cover_pic"
                                width="220rpx"
                                height="220rpx"
                                :mode="sGoodsPic.backgroundSize"
                            ></app-image>
                            <div v-else-if="sign === 'composition'"
                                 :style="{borderTopLeftRadius: `${cBorderTop}rpx`, borderBottomLeftRadius: `${cBorderBottom}rpx`}"
                                 style="width: 328rpx;height: 100%;overflow: hidden;">
                                <app-diy-composition-image
                                    :mode="sGoodsPic.backgroundSize"
                                    :image-list="goods.cover_pic_list"></app-diy-composition-image>
                            </div>
                            <app-image
                                v-else
                                :borderRadius="sGoodsPic.borderRadius"
                                :img-src="goods.cover_pic"
                                width="220rpx"
                                height="220rpx"
                                :mode="sGoodsPic.backgroundSize"
                            ></app-image>
                        </view>

                        <!-- 角标 -->
                        <view class="goods-tag" v-if="showGoodsTag">
                            <app-image :img-src="goodsTagPicUrl"
                                       :borderRadius="`${goodsBorderColor ? cBorderTop : 0}rpx 0 0 0`"
                                       width="64rpx" height="64rpx"></app-image>
                        </view>
                        <view class="right box-grow-1 dir-top-nowrap main-between"
                              :style="{
                                padding: sign === 'advance' || sign=== 'composition' || (sign === 'flash-sale' && ((goods.vip_card_appoint && goods.vip_card_appoint.discount) && (goods.level_show == 1 && goods.is_negotiable != 1))) ? `10rpx 24rpx 6rpx 20rpx` : '28rpx 24rpx 24rpx 20rpx',
                                height: sign === 'composition' ? '165rpx' : '220rpx',
                          }">
                            <view class="box-grow-0 name "
                                  :class="(sign === 'advance' || sign === 'miaosha' || sign === 'flash-sale') || (goods.vip_card_appoint && goods.vip_card_appoint.discount) || (goods.level_show == 1 && goods.is_negotiable != 1) ? 't-omit name-one' : 't-omit-two name-two'">
                                <text class="dir-tag-def"
                                      v-if="tag && sign === 'advance' || sign === 'pick'|| sign === 'miaosha'"
                                      :style="{'background-color': theme.background_o,'color': theme.color}"
                                >
                                    {{ goods.people_num ? goods.people_num : '' }}{{ tag }}
                                </text>
                                <text class="dir-tag-def"
                                      v-if="tag && sign !== 'advance' && sign !== 'pick' && sign !== 'miaosha'  && ((sign == 'pintuan' && goods.people_num) || sign != 'pintuan')"
                                      :style="{'background-color': theme.background_o,'color': theme.color}"
                                >
                                    {{ goods.people_num ? goods.people_num : '' }}{{ tag }}
                                </text>
                                <text class="dir-tag-def"
                                      v-if="sign === 'weekly-buy'"
                                      :style="{'background-color': theme.background_o,'color': theme.color}"
                                >
                                    {{ goods.type_name}}
                                </text>

                                <!-- 商品名字 -->
                                <text v-if="sign === 'advance'">
                                    {{ showGoodsName ? goods.goods.goodsWarehouse.name : '' }}
                                </text>
                                <text v-else>{{ showGoodsName ? goods.name : '' }}</text>
                            </view>

                            <view class=" dir-top-nowrap main-right box-grow-1">
                                <template v-if="sign === 'flash-sale'">
                                    <view class="dir-left-nowrap main-between" style="margin-bottom: 10rpx">
                                        <view
                                            class="flash-sale"
                                            :style="{'background-color': theme.background}"
                                            v-if="goods.discount_type == 1"
                                        >{{ goods.min_discount }}折
                                        </view>
                                        <view
                                            class="flash-sale"
                                            :style="{'background-color': theme.background}"
                                            v-if="goods.discount_type == 2"
                                        >减{{ goods.min_discount }}元
                                        </view>
                                        <view v-if="showProgressBar" style="font-size: 20rpx;color: #999999;">
                                            {{ goods.sales }}
                                        </view>
                                    </view>
                                    <view class="app-percentage" v-if="showProgressBar"
                                          :style="{'width': '445rpx','margin-bottom': '10rpx','background-color': theme.background_l}">
                                        <view
                                            :style="{width: `${goods.percentage}%`,'background-color': theme.background}"></view>
                                    </view>
                                </template>
                                <view class="dir-left-nowrap cross-bottom">
                                    <view class="box-grow-1" :style="{'color': theme.color}">
                                        <!-- 时间 -->
                                        <template v-if="showTimer && sign !== 'flash-sale'">
                                            <app-goods-timer
                                                v-if="sign === 'advance'"
                                                :list-style="listStyle"
                                                :theme="theme"
                                                :start-date-time="goods.start_prepayment_at"
                                                :end-date-time="goods.end_prepayment_at"
                                                :sign="sign"
                                                :page-hide="pageHide"
                                            ></app-goods-timer>
                                            <app-goods-timer
                                                v-else
                                                :list-style="listStyle"
                                                :start-date-time="goods.start_time"
                                                :end-date-time="goods.end_time"
                                                :sign="sign"
                                                :page-hide="pageHide"
                                                :theme="theme"
                                            ></app-goods-timer>
                                        </template>
                                        <!-- #ifndef MP-ALIPAY -->
                                        <text v-if="sign === 'advance'" class="des-price"
                                              :style="{'color': theme.color,'border-color': theme.color,'margin-top': '5rpx'}">
                                            定金￥{{ goods.deposit }}抵￥{{ goods.swell_deposit }}
                                        </text>
                                        <!-- #endif -->
                                        <!-- #ifdef MP-ALIPAY -->
                                        <text v-if="sign === 'advance'" class="des-price"
                                              :style="{'color': theme.color,'border-color': theme.color,'margin-top': '5rpx'}">
                                            定金￥{{ goods.deposit }}抵￥{{ goods.swell_deposit }}
                                        </text>
                                        <!-- #endif -->
                                        <text class="tag" v-else-if="sign === 'pick'">
                                            {{ goods.rule_price }}元选{{ goods.rule_num }}{{ goods.unit }}
                                        </text>

                                        <template v-if="goods.is_level == 1 && goods.is_negotiable != 1">
                                            <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                        </template>
                                        <!-- #ifndef MP-ALIPAY -->
                                        <app-sup-vip
                                            :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                            v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                            :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                        ></app-sup-vip>
                                        <!-- #endif -->
                                        <!-- #ifdef MP-ALIPAY -->
                                        <app-sup-vip
                                            margin="4rpx 0"
                                            :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                            v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                            :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                        ></app-sup-vip>
                                        <!-- #endif -->
                                        <template v-if="sign === 'advance'">
                                            <view class="dir-left-nowrap main-left cross-center">
                                                <view class="goods-price ">
                                                    ￥{{ showGoodsPrice ? goods.goods.price : '' }}
                                                </view>
                                                <view class="original-price" style="margin-left: 10upx;"
                                                      v-if="isUnderLinePrice && goods.goods.goodsWarehouse.original_price">
                                                    ￥{{ goods.goods.goodsWarehouse.original_price }}
                                                </view>
                                            </view>
                                        </template>
                                        <view v-else
                                              :class="sign === 'miaosha'|| (sign === 'flash-sale' && showProgressBar) || (goods.vip_card_appoint && goods.vip_card_appoint.discount) || (goods.is_level == 1 && goods.is_negotiable != 1) ? 'dir-left-nowrap main-left cross-center' :  'dir-top-nowrap'">
                                            <view class="goods-price ">
                                                <u-new-price v-if="goods" :list-style="listStyle" :price-content="showGoodsPrice ? goods.price_content : ''"></u-new-price>
                                            </view>
                                            <view class="dir-left-nowrap">
                                                <view class="original-price" style="margin-left: 10upx;font-size:24rpx"
                                                      v-if="isShowOriginalPrice(goods)">
                                                    ￥{{ goods.original_price }}
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                    <!--购物车-->
                                    <view v-if="showBuyBtn && goods.is_negotiable != 1"
                                          :style="goods.buy_goods_auth ? btnStyle : disableBtnStyle"
                                          :class="[buyBtnClass, 'box-grow-0', 'buy-btn', 'main-center', 'cross-center']">
                                        {{ buyBtnText }}
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </template>
            <!--左右滑动-->
            <template v-if="listStyle === 0">
                <scroll-view scroll-x class="box-grow-0">
                    <view class="dir-left-nowrap new-goods-list-zero" id="swipe-left-right">
                        <view v-for="(goods, index) in newData"
                              v-bind:key="index" hover-class="goods-hover-class"
                              v-on:click.stop="jump(goods)"
                              class="goods-item box dir-top-nowrap box-grow-0"
                              :style="[sBorder]">
                            <view style="position: relative;">
                                <view :style="[{'border-radius': `${sGoodsPic.borderRadius}`, 'border-top-left-radius': showGoodsTag ? (goodsBorderColor ? `${cBorderTop}rpx` : 0) : `${cBorderTop}rpx`}]" class="out-dialog"
                                      v-if="(goods.goods_stock == 0 || (goods.goods && goods.goods.goods_stock == 0)) && appSetting.is_show_stock == '1'">
                                    <image :style="[{'border-radius': `${sGoodsPic.borderRadius}`}]"
                                           :src="appSetting.is_use_stock == '1' ? appImg.book_out : appSetting.sell_out_pic"></image>
                                </view>
                                <view class="box-grow-0">
                                    <template v-if="sign === 'advance'">
                                        <app-image :borderRadius="sGoodsPic.borderRadius"
                                                   :img-src="goods.goods.goodsWarehouse.cover_pic"
                                                   :width="sGoodsPic.width"
                                                   :height="sGoodsPic.height"
                                                   :mode="sGoodsPic.backgroundSize"
                                        ></app-image>
                                    </template>
                                    <div v-else-if="sign === 'composition'" style="width: 100%;height: 164rpx">
                                        <app-diy-composition-image
                                            :mode="sGoodsPic.backgroundSize"
                                            :image-list="goods.cover_pic_list"></app-diy-composition-image>
                                    </div>
                                    <template v-else>
                                        <app-image :borderRadius="sGoodsPic.borderRadius" :img-src="goods.cover_pic"
                                                   :width="sGoodsPic.width"
                                                   :height="sGoodsPic.height"
                                                   :mode="sGoodsPic.backgroundSize"></app-image>
                                    </template>
                                </view>
                                <view class="goods-tag" v-if="showGoodsTag">
                                    <app-image :img-src="goodsTagPicUrl" width="64rpx"
                                               :borderRadius="`${goodsBorderColor ? cBorderTop : 0}rpx 0 0 0`"
                                               height="64rpx"></app-image>
                                </view>
                                <view class="box-grow-0 timer" v-if="showTimer">
                                    <template v-if="sign === 'advance'">
                                        <app-goods-timer :list-style="listStyle"
                                                         :start-date-time="goods.start_prepayment_at"
                                                         :end-date-time="goods.end_prepayment_at"
                                                         :sign="sign" :page-hide="pageHide"
                                                         :theme="theme"
                                        ></app-goods-timer>
                                    </template>
                                    <template v-else>
                                        <app-goods-timer :list-style="listStyle" :start-date-time="goods.start_time"
                                                         :end-date-time="goods.end_time"
                                                         :sign="sign" :page-hide="pageHide"
                                                         :theme="theme"
                                        ></app-goods-timer>
                                    </template>
                                </view>
                            </view>
                            <view class="box-grow-1 dir-top-nowrap main-between" style="padding: 16rpx">
                                <view class="box-grow-0 goods-name t-omit-two" v-if="showGoodsName">
                                    <template
                                        v-if="['advance', 'pick', 'gift', 'exchange', 'composition', 'wholesale', 'step'].indexOf(sign) === -1">
                                        <text class="tag"
                                              :style="{'border-color': theme.border,'color': theme.color}"
                                              v-if="tag && ((sign === 'pintuan' && goods.people_num) || sign !== 'pintuan')">
                                            {{ goods.people_num ? goods.people_num : '' }}{{ tag }}
                                        </text>
                                    </template>
                                    <template
                                        v-if="['pick', 'gift', 'exchange', 'wholesale', 'step', 'advance'].indexOf(sign) !== -1">
                                        <text class="dir-tag-def"
                                              :style="{'background-color': theme.background_o,'color': theme.color}">
                                            {{ tag }}
                                        </text>
                                    </template>
                                    <template v-if="sign === 'composition'">
                                        <text class="dir-tag-def"
                                              :style="{'background-color': theme.background_o,'color': theme.color}">
                                            {{ goods.tag }}
                                        </text>
                                    </template>
                                    <template v-if="sign === 'weekly-buy'">
                                        <text class="dir-tag-def"
                                              :style="{'background-color': theme.background_o,'color': theme.color}">
                                            {{ goods.type_name }}
                                        </text>
                                    </template>
                                    <text v-if="sign === 'advance'">{{
                                            showGoodsName ?
                                                goods.goods.goodsWarehouse.name : ''
                                        }}
                                    </text>
                                    <text v-else>{{ showGoodsName ? goods.name : '' }}</text>
                                </view>
                                <view v-if="sign === 'advance'">
                                    <text class="des-price"
                                          :style="{'color': theme.color,'border-color': theme.color}">
                                        定金￥{{ goods.deposit }}抵￥{{ goods.swell_deposit }}
                                    </text>
                                </view>
                                <view v-if="sign === 'pick'">
                                    <text class="des-price"
                                          :style="{'border-color': theme.border,'color': theme.color}">
                                        {{ goods.rule_price }}元选{{ goods.rule_num }}{{ goods.unit }}
                                    </text>
                                </view>
                                <template v-if="sign === 'flash-sale'">
                                    <view :class="showProgressBar ? 'flash-sale-dis' : ''">
                                        <view class="flash-sale" v-if="goods.discount_type === 1"
                                              :style="{'background-color': theme.background}">{{ goods.min_discount }}折
                                        </view>
                                        <view class="flash-sale" v-if="goods.discount_type === 2"
                                              :style="{'background-color': theme.background}">减{{ goods.min_discount }}元
                                        </view>
                                    </view>
                                    <view v-if="showProgressBar" class="app-percentage"
                                          :style="{'background-color': theme.background_l}">
                                        <view
                                            :style="{width: `${goods.percentage}%`,'background-color':theme.background}"></view>
                                    </view>
                                    <text v-if="showProgressBar"
                                          style="font-size: 20rpx; color: #999;margin-top: 10rpx">
                                        {{ goods.sales }}
                                    </text>
                                </template>
                                <view :class="textStyle === 2 ? 'main-center' : 'dir-left-nowrap'"
                                      style="height: 15px;"
                                      v-if="sign === 'advance' && goods.goods.is_level == 1 && goods.is_negotiable != 1">
                                    <view class="member-price">
                                        <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                    </view>
                                </view>
                                <app-sup-vip :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                             :class="textStyle === 2 ? 'main-center' : ''" margin="4rpx 0"
                                             v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount && sign === 'advance'"
                                             :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"></app-sup-vip>
                                <view class="box-grow-0 price dir-left-nowrap cross-bottom main-between"
                                      :style="{marginTop: sign === 'advance' ? '0rpx' : '16rpx'}">
                                    <template v-if="sign === 'advance'">
                                        <view :class="textStyle === 2 ? 'main-center advance-center' : ''"
                                              style="width: 100%" v-if="showGoodsPrice">
                                            <view class="dir-top-nowrap main-right cross-top"
                                                  :style="{'color': theme.color}">
                                                <text class="t-omit"
                                                      style="font-size: 22rpx;height: 22rpx; line-height: 22rpx">
                                                    {{ showGoodsPrice ? `￥${goods.goods.price}` : '' }}
                                                </text>
                                                <text class="original-price"
                                                      style="font-size: 17rpx;height: 22rpx; line-height: 22rpx"
                                                      v-if="isUnderLinePrice && goods.goods.goodsWarehouse.original_price">
                                                    ￥{{ goods.goods.goodsWarehouse.original_price }}
                                                </text>
                                            </view>
                                        </view>
                                    </template>
                                    <template v-else>
                                        <view class="box-grow-1" :style="{'color': theme.color}">
                                            <view class="member-price" :class="textStyle === 2 ? 'main-center' : ''"
                                                  v-if="goods.is_level == 1 && goods.is_negotiable != 1 && sign !== 'pick'">
                                                <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                            </view>
                                            <view v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                                  :class="textStyle === 2 ? 'main-center' : ''">
                                                <app-sup-vip
                                                    :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                                    :margin="textStyle === 2 ? '0':'8rpx 0 0'"
                                                    :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                                ></app-sup-vip>
                                            </view>
                                            <view class="t-omit">
                                                <u-new-price v-if="goods" :list-style="listStyle" :price-content="showGoodsPrice ? goods.price_content : ''"></u-new-price>
                                            </view>
                                            <view class="original-price"
                                                  style="font-size: 20rpx"
                                                  v-if="isShowOriginalPrice(goods)">
                                                ￥{{ goods.original_price }}
                                            </view>
                                        </view>
                                        <view v-if="buyBtnPic && showBuyBtn">
                                            <image :src="buyBtnPic" style="height: 30rpx;width:30rpx"></image>
                                        </view>
                                    </template>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </template>
            <!-- 一行一个 -->
            <template v-else-if="listStyle === 1">
                <block v-for="(goods, index) in newData" :key="index">
                    <view
                        :style="[{'background-color':`${goodsStyle != 3 ? '#fff' : ''}`}, sBorder]"
                        class="goods-item app-column-1"
                        :class="[goodsClass, index !== newData.length - 1 ? 'app-column-1-mar' : '']"
                        @click="jump(goods)">
                        <view style="position: relative;">
                            <view class="out-dialog"
                                  :style="[{'height':`${coverPicHeight}`,'border-radius': `${sGoodsPic.borderRadius}`, 'border-top-left-radius': showGoodsTag ? (goodsBorderColor ? `${cBorderTop}rpx` : 0) : `${cBorderTop}rpx`}]"
                                  v-if="(goods.goods_stock == 0 || (goods.goods && goods.goods.goods_stock == 0)) && appSetting.is_show_stock == '1'">
                                <image v-if="coverPicHeight == '468rpx'"
                                       :style="[{'height':`${coverPicHeight}`,'border-radius': `${sGoodsPic.borderRadius}`}]"
                                       :src="appSetting.is_use_stock == '1' ? appImg.rate_out : appSetting.sell_out_other_pic"></image>
                                <image v-else
                                       :style="[{'height':`${coverPicHeight}`,'border-radius': `${sGoodsPic.borderRadius}`}]"
                                       :src="appSetting.is_use_stock == '1' ? appImg.one_out : appSetting.sell_out_pic"></image>
                            </view>
                            <view>
                                <app-image :borderRadius="sGoodsPic.borderRadius" v-if="sign === 'advance'"
                                           :img-src="goods.goods.goodsWarehouse.cover_pic"
                                           width="100%"
                                           :height="coverPicHeight"
                                           :mode="sGoodsPic.backgroundSize"
                                ></app-image>
                                <div v-else-if="sign === 'composition'" style="width: 100%;height: 336rpx;overflow: hidden">
                                    <app-diy-composition-image
                                        :style="{borderTopLeftRadius: `${cBorderTop}rpx`, borderTopRightRadius: `${cBorderTop}rpx`}"
                                        :mode="sGoodsPic.backgroundSize"
                                        :image-list="goods.cover_pic_list"></app-diy-composition-image>
                                </div>
                                <app-image :borderRadius="sGoodsPic.borderRadius" v-else
                                           :img-src="goods.cover_pic"
                                           width="100%"
                                           :height="coverPicHeight"
                                           :mode="sGoodsPic.backgroundSize"
                                ></app-image>
                            </view>
                            <view class="goods-tag" v-if="showGoodsTag">
                                <app-image :img-src="goodsTagPicUrl"
                                           :borderRadius="`${goodsBorderColor ? cBorderTop : 0}rpx 0 0 0`"
                                           width="64rpx"
                                           height="64rpx"
                                >
                                </app-image>
                            </view>
                            <view class="box-grow-0 timer" v-if="showTimer">
                                <template v-if="sign === 'advance'">
                                    <app-goods-timer
                                        :list-style="listStyle"
                                        :start-date-time="goods.start_prepayment_at"
                                        :end-date-time="goods.end_prepayment_at"
                                        :sign="sign" :page-hide="pageHide"
                                        :theme="theme"
                                    ></app-goods-timer>
                                </template>
                                <template v-else>
                                    <app-goods-timer
                                        :list-style="listStyle"
                                        :start-date-time="goods.start_time"
                                        :end-date-time="goods.end_time"
                                        :sign="sign" :page-hide="pageHide"
                                        :theme="theme"
                                    ></app-goods-timer>
                                </template>
                            </view>
                        </view>
                        <view class="goods-name t-omit-two" v-if="showGoodsName">
                            <template v-if="sign === 'advance'">
                                <text class="tag-pick"
                                      :style="{'background-color': theme.background_o,'color': theme.color}">
                                    {{ tag }}
                                </text>
                                <text>{{ showGoodsName ? goods.goods.goodsWarehouse.name : '' }}</text>
                            </template>
                            <template v-if="['pick', 'gift', 'exchange', 'wholesale', 'step'].indexOf(sign) !== -1">
                                <text class="tag-pick"
                                      :style="{'background-color': theme.background_o,'color': theme.color}">
                                    {{ tag }}
                                </text>
                                <text>{{ showGoodsName ? goods.name : '' }}</text>
                            </template>
                            <template v-else-if="sign === 'composition'">
                                <text class="tag-pick"
                                      :style="{'background-color': theme.background_o,'color': theme.color}">
                                    {{ goods.tag }}
                                </text>
                                <text>{{ showGoodsName ? goods.name : '' }}</text>
                            </template>
                            <template v-else-if="sign === 'weekly-buy'">
                                <text class="dir-tag-def"
                                      :style="{'background-color': theme.background_o,'color': theme.color}">
                                    {{ goods.type_name }}
                                </text>
                                <text>{{ showGoodsName ? goods.name : '' }}</text>
                            </template>
                            <template v-else>
                                <text class="tag"
                                      :style="{'border-color': theme.border,'color': theme.color}"
                                      v-if="tag && sign == 'pintuan' && goods.people_num">
                                    {{ goods.people_num ? goods.people_num : '' }}{{ tag }}
                                </text>
                                <text>{{ showGoodsName ? goods.name : '' }}</text>
                            </template>
                        </view>
                        <template v-if="sign === 'advance'">
                            <text class="des-price"
                                  :style="{'border-color': theme.border,'color': theme.color,'margin-left':'24rpx','margin-top':'15rpx'}">
                                定金￥{{ goods.deposit }}抵￥{{ goods.swell_deposit }}
                            </text>
                        </template>
                        <template v-if="sign === 'flash-sale'">
                            <view class="dir-top-nowrap" style="margin-bottom: 10rpx;padding:0 24rpx;">
                                <view :class="showProgressBar ? 'flash-sale-dis' : ''">
                                    <view class="flash-sale" :style="{'background-color': theme.background}"
                                          v-if="goods.discount_type == 1">{{ goods.min_discount }}折
                                    </view>
                                    <view class="flash-sale" :style="{'background-color': theme.background}"
                                          v-if="goods.discount_type == 2">减{{ goods.min_discount }}元
                                    </view>
                                </view>
                                <view v-if="showProgressBar" class="app-percentage"
                                      :style="{'background-color': theme.background_l,'width':'660rpx'}">
                                    <view
                                        :style="{width: `${goods.percentage}%`,'background-color': theme.background}"></view>
                                </view>
                                <view v-if="sign === 'flash-sale' && showProgressBar"
                                      style="font-size: 20rpx;color: #999999;">{{ goods.sales }}
                                </view>
                            </view>
                        </template>
                        <template v-if="sign === 'pick'">
                            <text class="des-price"
                                  :style="{'border-color': theme.border,'color': theme.color,'margin-left':'24rpx','margin-top':'15rpx'}">
                                {{ goods.rule_price }}元选{{ goods.rule_num }}{{ goods.unit }}
                            </text>
                        </template>
                        <view class="price dir-left-nowrap cross-center"
                              :style="{marginTop: sign === 'advance' ? '0rpx' : '16rpx'}">
                            <view class="box-grow-1 t-omit" :style="{'color': theme.color}">
                                <view v-if="sign === 'advance'" class="dir-left-nowrap cross-center"
                                      :class="textStyle === 2 ? 'main-center' : ''">
                                    <view v-if="goods.goods.is_level == 1">
                                        <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                    </view>
                                    <app-sup-vip :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                                 margin='0 0 0 12rpx'
                                                 v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                                 :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"></app-sup-vip>
                                </view>
                                <template v-if="sign === 'advance'">
                                    <view :class="{'dir-left-nowrap': goods.goods.is_level == 1}"
                                          v-if="showGoodsPrice">
                                        <view class="dir-left-nowrap cross-center"
                                              :class="{'main-center' :textStyle == 2}">
                                            <view style="font-size: 22rpx;height: 22rpx;line-height: 22rpx">
                                                {{ showGoodsPrice ? `￥${goods.goods.price}` : '' }}
                                            </view>
                                        </view>
                                        <view class="original-price"
                                              style="font-size: 17rpx;height:17rpx;line-height: 17rpx;"
                                              v-if="isUnderLinePrice && goods.goods.goodsWarehouse.original_price">
                                            ￥{{ goods.goods.goodsWarehouse.original_price }}
                                        </view>
                                    </view>
                                </template>
                                <template v-else>
                                    <view class="dir-left-nowrap cross-center"
                                          :class="textStyle === 2 ? 'main-center' : ''">
                                        <view>
                                            <u-new-price v-if="goods" :list-style="listStyle" :price-content="showGoodsPrice ? goods.price_content : ''"></u-new-price>
                                        </view>
                                        <view class="member-price"
                                              v-if="goods.is_level == 1 && goods.is_negotiable != 1 && sign !== 'pick'">
                                            <app-member-price :theme="theme"
                                                              :price="goods.level_price"></app-member-price>
                                        </view>
                                        <app-sup-vip :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                                     margin='0 0 0 12rpx'
                                                     v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                                     :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"></app-sup-vip>
                                    </view>
                                    <view class="original-price"
                                          style="font-size: 24rpx"
                                          v-if="isShowOriginalPrice(goods)">
                                        ￥{{ goods.original_price }}
                                    </view>
                                </template>
                            </view>
                            <template v-if="showBuyBtn && goods.is_negotiable != 1 && textStyle !== 2">
                                <view class="box-grow-0 buy-btn main-center cross-center"
                                      :style="goods.buy_goods_auth ? btnStyle : disableBtnStyle" :class="buyBtnClass">
                                    {{ buyBtnText }}
                                </view>
                            </template>
                        </view>
                    </view>
                </block>
            </template>
            <!-- 一行两个 -->
            <template v-else-if="listStyle === 2">
                <block v-for="(goods, index) in newData" :key="index">
                    <view
                        :style="[{'background-color':`${goodsStyle != 3 ? '#fff' : ''}`}, sBorder, calcStyle]"
                        class="box-grow-0 dir-top-nowrap goods-item app-column-2" :class="goodsClass"
                        @click="jump(goods)">
                        <view style="position: relative;">
                            <view :style="[{'border-radius': `${sGoodsPic.borderRadius}`, 'border-top-left-radius': showGoodsTag ? (goodsBorderColor ? `${cBorderTop}rpx` : 0) : `${cBorderTop}rpx`}]" class="out-dialog"
                                  v-if="(goods.goods_stock == 0 || (goods.goods && goods.goods.goods_stock == 0)) && appSetting.is_show_stock == '1'">
                                <image :style="[{'border-radius': `${sGoodsPic.borderRadius}`}]"
                                       :src="appSetting.is_use_stock == '1' ? appImg.book_out : appSetting.sell_out_pic"></image>
                            </view>
                            <view class="box-grow-0">
                                <template v-if="sign === 'advance'">
                                    <app-image :borderRadius="sGoodsPic.borderRadius"
                                               :img-src="goods.goods.goodsWarehouse.cover_pic"
                                               height="342rpx"
                                               :mode="sGoodsPic.backgroundSize"
                                    ></app-image>
                                </template>
                                <div v-else-if="sign === 'composition'" style="width: 100%;height: 164rpx;overflow-x: hidden">
                                    <app-diy-composition-image
                                        :style="{borderTopLeftRadius: `${cBorderTop}rpx`, borderTopRightRadius: `${cBorderTop}rpx`}"
                                        :mode="fill === 1 ? 'aspectFill' : 'aspectFit'"
                                        :image-list="goods.cover_pic_list"></app-diy-composition-image>
                                </div>
                                <template v-else>
                                    <app-image :borderRadius="sGoodsPic.borderRadius" :img-src="goods.cover_pic"
                                               height="342rpx"
                                               :mode="sGoodsPic.backgroundSize"></app-image>
                                </template>
                            </view>
                            <view class="goods-tag" v-if="showGoodsTag">
                                <app-image :img-src="goodsTagPicUrl"
                                           :borderRadius="`${goodsBorderColor ? cBorderTop : 0}rpx 0 0 0`"
                                           width="64rpx"
                                           height="64rpx"></app-image>
                            </view>
                            <view class="box-grow-0 timer" v-if="showTimer">
                                <template v-if="sign === 'advance'">
                                    <app-goods-timer :list-style="listStyle"
                                                     :start-date-time="goods.start_prepayment_at"
                                                     :end-date-time="goods.end_prepayment_at"
                                                     :sign="sign" :page-hide="pageHide"
                                                     :theme="theme"
                                    ></app-goods-timer>
                                </template>
                                <template v-else>
                                    <app-goods-timer :list-style="listStyle" :start-date-time="goods.start_time"
                                                     :end-date-time="goods.end_time"
                                                     :sign="sign" :page-hide="pageHide"
                                                     :theme="theme"
                                    ></app-goods-timer>
                                </template>
                            </view>
                        </view>
                        <view class="box-grow-1 dir-top-nowrap main-between">
                            <view class="box-grow-0 goods-name t-omit-two" v-if="showGoodsName">
                                <template
                                    v-if="['advance', 'pick', 'gift', 'exchange', 'composition', 'wholesale', 'step'].indexOf(sign) === -1">
                                    <text class="tag"
                                          :style="{'border-color': theme.border,'color': theme.color}"
                                          v-if="tag && ((sign === 'pintuan' && goods.people_num) || sign !== 'pintuan')">
                                        {{ goods.people_num ? goods.people_num : '' }}{{ tag }}
                                    </text>
                                </template>
                                <template v-if="['pick', 'gift', 'exchange', 'wholesale', 'step', 'advance'].indexOf(sign) !== -1">
                                    <text class="dir-tag-def"
                                          :style="{'background-color': theme.background_o,'color': theme.color}">
                                        {{ tag }}
                                    </text>
                                </template>
                                <template v-if="sign === 'composition'">
                                    <text class="dir-tag-def"
                                          :style="{'background-color': theme.background_o,'color': theme.color}">
                                        {{ goods.tag }}
                                    </text>
                                </template>
                                <template v-if="sign === 'weekly-buy'">
                                    <text class="dir-tag-def"
                                          :style="{'background-color': theme.background_o,'color': theme.color}">
                                        {{ goods.type_name }}
                                    </text>
                                </template>
                                <text v-if="sign === 'advance'">{{
                                        showGoodsName ?
                                            goods.goods.goodsWarehouse.name : ''
                                    }}
                                </text>
                                <text v-else>{{ showGoodsName ? goods.name : '' }}</text>
                            </view>
                            <view v-if="sign === 'advance'">
                                <text class="des-price"
                                      :style="{'border-color': theme.border,'color': theme.color,'margin-left':'24rpx'}">
                                    定金￥{{ goods.deposit }}抵￥{{ goods.swell_deposit }}
                                </text>
                            </view>
                            <view v-if="sign === 'pick'">
                                <text class="des-price"
                                      :style="{'border-color': theme.border,'color': theme.color,'margin-left':'24rpx'}">
                                    {{ goods.rule_price }}元选{{ goods.rule_num }}{{ goods.unit }}
                                </text>
                            </view>
                            <template v-if="sign === 'flash-sale'">
                                <view :class="showProgressBar ? 'flash-sale-dis' : ''" style="margin-left: 24rpx;">
                                    <view class="flash-sale" v-if="goods.discount_type === 1"
                                          :style="{'background-color': theme.background}">{{ goods.min_discount }}折
                                    </view>
                                    <view class="flash-sale" v-if="goods.discount_type === 2"
                                          :style="{'background-color': theme.background}">减{{ goods.min_discount }}元
                                    </view>
                                </view>
                                <view v-if="showProgressBar" class="app-percentage"
                                      :style="{'background-color': theme.background_l,'width':'296rpx','margin-left':'24rpx'}">
                                    <view
                                        :style="{width: `${goods.percentage}%`,'background-color':theme.background}"></view>
                                </view>
                                <text v-if="showProgressBar"
                                      style="font-size: 20rpx; color: #999;margin-top: 10rpx;padding-left: 24rpx">
                                    {{ goods.sales }}
                                </text>
                            </template>
                            <view :class="textStyle === 2 ? 'main-center' : 'dir-left-nowrap'"
                                  style="height: 15px;padding-left: 24rpx;"
                                  v-if="sign === 'advance' && goods.goods.is_level == 1 && goods.is_negotiable != 1">
                                <view class="member-price">
                                    <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                </view>
                            </view>
                            <app-sup-vip :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                         style="padding-left: 24rpx;"
                                         :class="textStyle === 2 ? 'main-center' : ''" margin="4rpx 0"
                                         v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount && sign === 'advance'"
                                         :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"></app-sup-vip>
                            <view class="box-grow-0 price dir-left-nowrap cross-bottom main-between"
                                  :style="{marginTop: sign === 'advance' ? '0rpx' : '16rpx'}">
                                <template v-if="sign === 'advance'">
                                    <view :class="textStyle === 2 ? 'main-center advance-center' : ''"
                                          style="width: 100%" v-if="showGoodsPrice">
                                        <view class="dir-top-nowrap main-right cross-top"
                                              :style="{'color': theme.color}">
                                            <text class="t-omit"
                                                  style="font-size: 22rpx;height: 22rpx; line-height: 22rpx">
                                                {{ showGoodsPrice ? `￥${goods.goods.price}` : '' }}
                                            </text>
                                            <text class="original-price"
                                                  style="font-size: 17rpx;height: 22rpx; line-height: 22rpx"
                                                  v-if="isUnderLinePrice && goods.goods.goodsWarehouse.original_price">
                                                ￥{{ goods.goods.goodsWarehouse.original_price }}
                                            </text>
                                        </view>
                                    </view>
                                </template>
                                <template v-else>
                                    <view class="box-grow-1" :style="{'color': theme.color}">
                                        <view class="member-price" :class="textStyle === 2 ? 'main-center' : ''"
                                              v-if="goods.is_level == 1 && goods.is_negotiable != 1 && sign !== 'pick'">
                                            <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                        </view>
                                        <view v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                              :class="textStyle === 2 ? 'main-center' : ''">
                                            <app-sup-vip
                                                :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                                :margin="textStyle === 2 ? '0':'8rpx 0 0'"
                                                :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                            ></app-sup-vip>
                                        </view>
                                        <view class="t-omit">
                                            <u-new-price v-if="goods" :list-style="listStyle" :price-content="showGoodsPrice ? goods.price_content : ''"></u-new-price>
                                        </view>
                                        <view class="original-price"
                                              style="font-size: 24rpx"
                                              v-if="isShowOriginalPrice(goods)">
                                            ￥{{ goods.original_price }}
                                        </view>
                                    </view>
                                </template>
                                <view v-if="showBuyBtn && goods.is_negotiable != 1 && textStyle !== 2"
                                      class="box-grow-0 buy-btn main-center cross-center"
                                      :style="goods.buy_goods_auth ? btnStyle : disableBtnStyle" :class="buyBtnClass">
                                    {{ buyBtnText }}
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </template>
            <!--一行三个-->
            <template v-else-if="listStyle === 3">
                <view class="dir-top-nowrap new-goods-list-two">
                    <view v-for="(newGroup, index) of group" :key="index"
                          class="dir-left-nowrap main-between box-grow-0">
                        <view v-for="(goods,t_index) in newGroup" :key="t_index" class="box">
                            <view v-if="!goods._v" v-on:click.stop="jump(goods)"
                                  hover-class="goods-hover-class"
                                  class="dir-top-nowrap goods-item"
                                  :style="[sBorder, {height: '100%'}]">
                                <view style="position: relative;">
                                    <view :style="[{'border-radius': `${sGoodsPic.borderRadius}`,'border-top-left-radius': showGoodsTag ? (goodsBorderColor ? `${cBorderTop}rpx` : 0) : `${cBorderTop}rpx`}]" class="out-dialog"
                                          v-if="(goods.goods_stock == 0 || (goods.goods && goods.goods.goods_stock == 0)) && appSetting.is_show_stock == '1'">
                                        <image :style="[{'border-radius': `${sGoodsPic.borderRadius}`}]"
                                               :src="appSetting.is_use_stock == '1' ? appImg.book_out : appSetting.sell_out_pic"></image>
                                    </view>
                                    <view class="box-grow-0">
                                        <template v-if="sign === 'advance'">
                                            <app-image :borderRadius="sGoodsPic.borderRadius"
                                                       :img-src="goods.goods.goodsWarehouse.cover_pic"
                                                       :width="sGoodsPic.width"
                                                       :height="sGoodsPic.height"
                                                       :mode="sGoodsPic.backgroundSize"
                                            ></app-image>
                                        </template>
                                        <div v-else-if="sign === 'composition'" style="width: 100%;height: 164rpx">
                                            <app-diy-composition-image
                                                :mode="sGoodsPic.backgroundSize"
                                                :image-list="goods.cover_pic_list"></app-diy-composition-image>
                                        </div>
                                        <template v-else>
                                            <app-image :borderRadius="sGoodsPic.borderRadius"
                                                       :img-src="goods.cover_pic"
                                                       :width="sGoodsPic.width"
                                                       :height="sGoodsPic.height"
                                                       :mode="sGoodsPic.backgroundSize"
                                            ></app-image>
                                        </template>
                                    </view>
                                    <view class="goods-tag" v-if="showGoodsTag">
                                        <app-image :img-src="goodsTagPicUrl" width="64rpx"
                                                   :borderRadius="`${goodsBorderColor ? cBorderTop : 0}rpx 0 0 0`"
                                                   height="64rpx"></app-image>
                                    </view>
                                    <view class="box-grow-0 timer" v-if="showTimer">
                                        <template v-if="sign === 'advance'">
                                            <app-goods-timer :list-style="listStyle"
                                                             :start-date-time="goods.start_prepayment_at"
                                                             :end-date-time="goods.end_prepayment_at"
                                                             :sign="sign" :page-hide="pageHide"
                                                             :theme="theme"
                                            ></app-goods-timer>
                                        </template>
                                        <template v-else>
                                            <app-goods-timer :list-style="listStyle" :start-date-time="goods.start_time"
                                                             :end-date-time="goods.end_time"
                                                             :sign="sign" :page-hide="pageHide"
                                                             :theme="theme"
                                            ></app-goods-timer>
                                        </template>
                                    </view>
                                </view>
                                <view class="box-grow-1 dir-top-nowrap main-between" style="padding: 16rpx">
                                    <view class="box-grow-0 goods-name t-omit-two" v-if="showGoodsName">
                                        <template
                                            v-if="['advance', 'pick', 'gift', 'exchange', 'composition', 'wholesale', 'step', 'weekly-buy'].indexOf(sign) === -1">
                                            <text class="tag"
                                                  :style="{'border-color': theme.border,'color': theme.color}"
                                                  v-if="tag && ((sign === 'pintuan' && goods.people_num) || sign !== 'pintuan')">
                                                {{ goods.people_num ? goods.people_num : '' }}{{ tag }}
                                            </text>
                                        </template>
                                        <template
                                            v-if="['pick', 'gift', 'exchange', 'wholesale', 'step', 'advance'].indexOf(sign) !== -1">
                                            <text class="dir-tag-def"
                                                  :style="{'background-color': theme.background_o,'color': theme.color}">
                                                {{ tag }}
                                            </text>
                                        </template>
                                        <template v-if="sign === 'composition'">
                                            <text class="dir-tag-def"
                                                  :style="{'background-color': theme.background_o,'color': theme.color}">
                                                {{ goods.tag }}
                                            </text>
                                        </template>
                                        <template v-if="sign === 'weekly-buy'">
                                            <text class="dir-tag-def"
                                                  :style="{'background-color': theme.background_o,'color': theme.color}">
                                                {{ goods.type_name }}
                                            </text>
                                        </template>
                                        <text v-if="sign === 'advance'">{{
                                                showGoodsName ?
                                                    goods.goods.goodsWarehouse.name : ''
                                            }}
                                        </text>
                                        <text v-else>{{ showGoodsName ? goods.name : '' }}</text>
                                    </view>
                                    <view v-if="sign === 'advance'">
                                        <text class="des-price"
                                              :style="{'color': theme.color,'border-color': theme.color}">
                                            定金￥{{ goods.deposit }}抵￥{{ goods.swell_deposit }}
                                        </text>
                                    </view>
                                    <view v-if="sign === 'pick'">
                                        <text class="des-price"
                                              :style="{'border-color': theme.border,'color': theme.color}">
                                            {{ goods.rule_price }}元选{{ goods.rule_num }}{{ goods.unit }}
                                        </text>
                                    </view>
                                    <template v-if="sign === 'flash-sale'">
                                        <view :class="showProgressBar ? 'flash-sale-dis' : ''">
                                            <view class="flash-sale" v-if="goods.discount_type === 1"
                                                  :style="{'background-color': theme.background}">
                                                {{ goods.min_discount }}折
                                            </view>
                                            <view class="flash-sale" v-if="goods.discount_type === 2"
                                                  :style="{'background-color': theme.background}">
                                                减{{ goods.min_discount }}元
                                            </view>
                                        </view>
                                        <view v-if="showProgressBar" class="app-percentage"
                                              :style="{'background-color': theme.background_l}">
                                            <view
                                                :style="{width: `${goods.percentage}%`,'background-color':theme.background}"></view>
                                        </view>
                                        <text v-if="showProgressBar"
                                              style="font-size: 20rpx; color: #999;margin-top: 10rpx">
                                            {{ goods.sales }}
                                        </text>
                                    </template>
                                    <view :class="textStyle === 2 ? 'main-center' : 'dir-left-nowrap'"
                                          style="height: 15px;"
                                          v-if="sign === 'advance' && goods.goods.is_level == 1 && goods.is_negotiable != 1">
                                        <view class="member-price">
                                            <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                        </view>
                                    </view>
                                    <app-sup-vip :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                                 :class="textStyle === 2 ? 'main-center' : ''" margin="4rpx 0"
                                                 v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount && sign === 'advance'"
                                                 :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"></app-sup-vip>
                                    <view class="box-grow-0 price dir-left-nowrap cross-bottom main-between"
                                          :style="{marginTop: sign === 'advance' ? '0rpx' : '16rpx'}">
                                        <template v-if="sign === 'advance'">
                                            <view :class="textStyle === 2 ? 'main-center advance-center' : ''"
                                                  style="width: 100%" v-if="showGoodsPrice">
                                                <view class="dir-top-nowrap main-right cross-top"
                                                      :style="{'color': theme.color}">
                                                    <text class="t-omit"
                                                          style="font-size: 22rpx;height: 22rpx; line-height: 22rpx">
                                                        {{ showGoodsPrice ? `￥${goods.goods.price}` : '' }}
                                                    </text>
                                                    <text class="original-price"
                                                          style="font-size: 17rpx;height: 22rpx; line-height: 22rpx"
                                                          v-if="isUnderLinePrice && goods.goods.goodsWarehouse.original_price">
                                                        ￥{{ goods.goods.goodsWarehouse.original_price }}
                                                    </text>
                                                </view>
                                            </view>
                                        </template>
                                        <template v-else>
                                            <view class="box-grow-1" :style="{'color': theme.color}">
                                                <view class="member-price" :class="textStyle === 2 ? 'main-center' : ''"
                                                      v-if="goods.is_level == 1 && goods.is_negotiable != 1 && sign !== 'pick'">
                                                    <app-member-price :theme="theme" :price="goods.level_price"></app-member-price>
                                                </view>
                                                <view v-if="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                                      :class="textStyle === 2 ? 'main-center' : ''">
                                                    <app-sup-vip
                                                        :is_vip_card_user="goods.vip_card_appoint.is_vip_card_user"
                                                        :margin="textStyle === 2 ? '0':'8rpx 0 0'"
                                                        :discount="goods.vip_card_appoint && goods.vip_card_appoint.discount"
                                                    ></app-sup-vip>
                                                </view>
                                                <view class="t-omit">
                                                    <u-new-price v-if="goods" :list-style="listStyle" :price-content="showGoodsPrice ? goods.price_content : ''"></u-new-price>
                                                </view>
                                                <view class="original-price"
                                                      style="font-size: 20rpx"
                                                      v-if="isShowOriginalPrice(goods)">
                                                    ￥{{ goods.original_price }}
                                                </view>
                                            </view>
                                            <view v-if="buyBtnPic && showBuyBtn">
                                                <image :src="buyBtnPic" style="height: 30rpx;width:30rpx"></image>
                                            </view>
                                        </template>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import appPrice from "@/components/page-component/goods/app-price.vue";
import appGoodsTimer from "@/components/page-component/app-diy-goods-list/app-goods-timer.vue";
import appDiyCompositionImage from '@/components/page-component/app-diy-goods-list/app-diy-composition-image.vue';
import uNewPrice from '@/components/page-component/u-goods-list/u-new-price.vue';
export default {
    name: "app-diy-goods-list",
    components: {
        'app-price': appPrice,
        'app-goods-timer': appGoodsTimer,
        appDiyCompositionImage,
        uNewPrice
    },
    props: {
        buyBtnTextColor:String,
        buyBtnPic: String,
        goodsEndColor:String,
        goodsBorderColor: String,

        bg: [String],
        cPaddingLr: [String, Number],
        cBorderBottom: [String, Number],
        cBorderTop: [String, Number],
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        goodsStyle: {
            type: Number,
            default() {
                return 1;
            }
        },
        textStyle: {
            type: Number,
            default() {
                return 1;
            }
        },
        listStyle: {
            type: Number,
            default() {
                return -1;
            }
        },
        showBuyBtn: {
            type: Boolean,
            default() {
                return false;
            }
        },
        buyBtnText: {
            type: String,
            default() {
                return '';
            }
        },
        buyBtnStyle: {
            type: Number,
            default() {
                return 1;
            }
        },
        fill: {
            type: Number,
            default() {
                return 1;
            }
        },
        showGoodsName: {
            type: Boolean,
            default() {
                return true;
            }
        },
        showGoodsPrice: {
            type: Boolean,
            default() {
                return true;
            }
        },
        showGoodsTag: {
            type: Boolean,
            default() {
                return true;
            }
        },
        goodsCoverProportion: {
            type: String,
            default() {
                return '1-1';
            }
        },
        customizeGoodsTag: {
            type: Boolean,
            default() {
                return false;
            }
        },
        goodsTagPicUrl: String,
        sign: String,
        buttonColor: {
            type: String,
            default() {
                return '';
            }
        },
        //是否显示划线价
        isUnderLinePrice: {
            type: Boolean,
            default() {
                return true;
            }
        },
        pageHide: Boolean,
        theme: Object,
        showProgressBar: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            imgRadius: '16rpx 16rpx 0 0',
            lisRadius: '16rpx',
            disableColor: '#999999'
        };
    },
    computed: {
        sGoodsPic() {
            let {fill, listStyle, cBorderTop, cBorderBottom, goodsCoverProportion} = this;
            let style = {};
            switch (listStyle) {
                case -1:
                    Object.assign(style, {
                        width: '200rpx',
                        height: '200rpx',
                        paddingRight: '20rpx',
                        borderRadius: `${cBorderTop}rpx 0 0 ${cBorderBottom}rpx`
                    })
                    break;
                case 0:
                    Object.assign(style, {
                        // width: '200rpx',
                        width: '100%',
                        height: '200rpx',
                        borderRadius: `${cBorderTop}rpx ${cBorderTop}rpx 0 0`
                    });
                    break;
                case 1:
                    Object.assign(style, {
                        width: '100%',
                        height: goodsCoverProportion === '3-2' ? '471rpx' : '700rpx',
                        borderRadius: `${cBorderTop}rpx ${cBorderTop}rpx 0 0`
                    });
                    break;
                case 2:
                    Object.assign(style, {
                        width: '100%',
                        height: '342rpx',
                        borderRadius: `${cBorderTop}rpx ${cBorderTop}rpx 0 0`
                    });
                    break;
                case 3:
                    Object.assign(style, {
                        width: '100%',
                        height: '200rpx',
                        borderRadius: `${cBorderTop}rpx ${cBorderTop}rpx 0 0`
                    });
                    break;
            }

            return Object.assign(style, {
                backgroundSize: `${(fill === 1 ? 'aspectFill' : 'aspectFit')}`
            })
        },
        sBorder() {
            let {goodsStyle, bg, cBorderTop, cBorderBottom, textStyle,goodsEndColor,goodsBorderColor} = this;
            let style = {background: `${bg}`};
            if (goodsStyle === 1) {
                Object.assign(style, {
                    background: goodsEndColor || 'white',
                    border: goodsBorderColor ? `1px solid ${goodsBorderColor}` : ''
                })
            } else if (goodsStyle === 2) {
                Object.assign(style, {
                    background: goodsEndColor || 'white',
                    borderStyle: 'solid',
                    borderWidth: '1rpx',
                    borderColor: goodsBorderColor ||'#e2e2e2',
                })
            }
            return Object.assign(style, {
                position: 'relative',
                height: 'inherit',
                borderTopLeftRadius: `${cBorderTop}rpx`,
                borderTopRightRadius: `${cBorderTop}rpx`,
                borderBottomLeftRadius: `${cBorderBottom}rpx`,
                borderBottomRightRadius: `${cBorderBottom}rpx`,
                textAlign: textStyle === 2 ? 'center' : 'left',
                //background: this.goodsStyle === 3 ? bg: '#FFFFFF',主题色冲突回滚
                background:goodsEndColor || '#FFFFFF',
            })
        },
        calcStyle() {
            let limit = 16;
            let {cPaddingLr, goodsStyle, listStyle} = this;
            limit = (listStyle - 1) * limit;
            let padding = cPaddingLr !== undefined ? Number(cPaddingLr) * 2 : 0;
            let border = goodsStyle === 2 ? listStyle * 2 : 0;
            let width = 750 - padding - limit - border;
            return {
                width: width / listStyle  + 'rpx'
            }
        },
        goodsListStyle() {
            return {
                padding: `0`,
            }
        },
        ...mapState({
            appImg: state => state.mallConfig.__wxapp_img.mall,
            appSetting: state => state.mallConfig.mall.setting,
            platform: function (state) {
                return state.gConfig.systemInfo.platform;
            }
        }),
        ...mapGetters('mallConfig', {
            vip: 'getVip',
            getVideo: 'getVideo',
            getTheme: 'getTheme',
        }),
        newData() {
            return this.list;
        },
        listClass() {
            switch (this.listStyle) {
                case 2:
                    return `dir-left-wrap column-2 main-between `;
                default:
                    return ``;
            }
        },
        buyBtnClass() {
            let buyBtnClass = ``;
            if (this.buyBtnStyle === 2 || this.buyBtnStyle === 4) {
                buyBtnClass += `buy-btn-border `;
            }
            if (this.buyBtnStyle === 4 || this.buyBtnStyle === 3) {
                buyBtnClass += `buy-btn-radius`;
            }
            return buyBtnClass;
        },
        btnStyle() {
            let btnStyle = ``;
            if (this.buyBtnStyle === 1 || this.buyBtnStyle === 3) {
                btnStyle += `background-color: ${this.buttonColor};color: ${this.buyBtnTextColor || '#FFFFFF'};`;
            } else {
                btnStyle += `border-color: ${this.buttonColor};color: ${this.buyBtnTextColor || this.buttonColor};`;
            }
            return btnStyle;
        },
        disableBtnStyle() {
            let btnStyle = ``;
            if (this.buyBtnStyle === 1 || this.buyBtnStyle === 3) {
                btnStyle += `background-color: ${this.disableColor};color: ${this.buyBtnTextColor || '#FFFFFF'};`;
            } else {
                btnStyle += `border-color: ${this.disableColor};color: ${this.buyBtnTextColor || this.disableColor};`;
            }
            return btnStyle;
        },
        coverPicHeight() {
            if (this.goodsCoverProportion === '1-1') {
                return `702rpx`;
            } else {
                return `468rpx`;
            }
        },
        goodsClass() {
            let goodsClass = ``;
            if (this.goodsStyle === 2) {
                goodsClass += `border`;
            }
            if (this.textStyle === 2) {
                goodsClass += `text-center`;
            }
            return goodsClass;
        },
        tag() {
            let tag = '';
            switch (this.sign) {
                case 'miaosha':
                    tag = '秒杀';
                    break;
                case 'bargain':
                    tag = '砍价';
                    break;
                case 'pintuan':
                    tag = '人团';
                    break;
                case 'advance':
                    tag = '预售';
                    break;
                case 'pick':
                    tag = 'N元任选';
                    break;
                case 'composition':
                    tag = '套餐组合';
                    break;
                case 'gift':
                    tag = '社交送礼';
                    break;
                case 'flash-sale':
                    tag = '限时抢购';
                    break;
                case 'wholesale':
                    tag = '商品批发';
                    break;
                case 'exchange':
                    tag = '礼品卡';
                    break;
                case 'step':
                    tag = '步数宝';
                    break;
                default:
                    tag = null;
                    break;
            }
            return tag;
        },
        showTimer() {
            if (!(this.sign === 'miaosha' || this.sign === 'bargain' || this.sign === 'lottery' || this.sign === 'advance' || this.sign === 'flash-sale')) return false;
            return true;
        },
        group(){
            let array = this.newData;
            let subGroupLength = 3;
            array = JSON.parse(JSON.stringify(array));
            let length = array.length;
            let addNum = length % subGroupLength === 0 ? 0 : subGroupLength - length % subGroupLength;
            array = array.concat(new Array(addNum).fill({'_v': true}))
            let index = 0;
            let newArray = [];
            while (index < array.length) {
                newArray.push(array.slice(index, index += subGroupLength));
            }
            return newArray;
        },
    },
    methods: {
        isShowBuyBtn(goods) {
            return this.showBuyBtn && goods.is_negotiable != 1 && this.textStyle !== 2 && this.listStyle !== 0;
        },
        isShowStock(goods) {
            return (goods.goods_stock == 0 || (goods.goods && goods.goods.goods_stock == 0)) && appSetting.is_show_stock == '1'
        },
        jump(data) {
            // #ifndef MP-BAIDU
            if (data.video_url && this.getVideo == 1 && data.sign !== 'lottery' && data.sign !== 'bargain' && data.sign !== 'wholesale') {
                let id = data.id;
                if (data.sign === 'advance') {
                    id = data.goods_id;
                }
                if (data.sign === 'gift') {
                    id = id + '&is_share=1';
                }

                // #ifdef MP
                uni.navigateTo({
                    url: `/pages/goods/video?goods_id=${id}&sign=${data.sign}`
                });
                // #endif
                // #ifdef H5
                uni.navigateTo({
                    url: data.page_url
                });
                // #endif
            } else {
                uni.navigateTo({
                    url: data.page_url
                });
            }
            // #endif
            // #ifdef MP-BAIDU
            uni.navigateTo({
                url: data.page_url
            });
            // #endif
        },
        isShowOriginalPrice(goods) {
            return this.isUnderLinePrice && goods.original_price && this.showGoodsPrice && goods.is_negotiable !== 1;
        },
    }
}
</script>

<style scoped lang="scss">
.timer {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}

.new-goods-list-zero {
    margin-left: #{-16rpx};
    overflow-x: auto;

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }
    .goods-name {
        /* #ifdef MP-ALIPAY */
        height: 64rpx;
        /* #endif */
    }
    .box {
        width: #{200rpx};
        height: inherit;
        margin-left: #{16rpx};

        .box-top {

            .u-dialog-img {
                position: absolute;
                z-index: 2;
            }

            .goods-tag {
                position: absolute;
                z-index: 1;
            }
        }

        .out-dialog {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 11;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);

            image {
                width: #{200rpx};
                height: #{200rpx};
            }
        }
        .goods-price {
            font-size: #{22rpx};
            color: #ff4544;
        }
    }

}

.new-goods-list-two {
    margin-bottom: #{-16rpx};
    margin-left: #{-16rpx};

    .goods-name {
        /* #ifdef MP-ALIPAY */
        height: 64rpx;
        /* #endif */
    }
    .box {
        width: 100%;
        height: inherit;
        margin-bottom: #{16rpx};
        margin-left: #{16rpx};

        .box-top {
            width: 100%;

            .u-dialog-img {
                position: absolute;
                z-index: 2;
            }

            .goods-tag {
                position: absolute;
                z-index: 1;
            }
        }

        .box-content {
            padding: #{10rpx};
            //min-height: #{120rpx};
            width: 100%;
        }

        .box-price {
            margin-top: auto;
        }

        .out-dialog {
            width: 100%;
            height: #{200rpx};
            position: absolute;
            z-index: 11;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);

            image {
                width: 100%;
                height: #{200rpx};
            }
        }

        .goods-price {
            font-size: #{22rpx};
            color: #ff4544;
        }
    }
}

.goods-name.tags[content]:before {
    content: attr(content);
    background: rgba(99, 190, 114, 0.1);
    border-radius: #{28rpx};
    font-size: #{22rpx};
    padding: 0 #{10rpx};
    display: inline-block;
    color: #ff4544;
    margin-right: #{10rpx};
    float: left;
}

.advance-member {
    margin-right: #{12rpx};
}

.advance-center .original-price {
    width: 100%;
    text-align: center;
}

.app-goods-list {
    %background-image {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .goods-list {
        padding: #{24rpx 24rpx 24rpx 24rpx};
        font-size: $uni-font-size-general-one;

        .border {
            border: #{1rpx} solid #e2e2e2;
        }

        .goods-item {
            position: relative;
            overflow: hidden;

            .app-button-icon {
                width: #{45rpx};
                height: #{45rpx};
                display: block;
                @extend %background-image;
            }

            .app-button-icon-cart {
                background-image: url('../../../static/image/icon/cats.png');
            }

            .app-button-icon-add {
                background-image: url('../../../static/image/icon/add-to.png');
            }

            .buy-btn {
                height: #{48rpx};
                border-radius: #{4rpx};
                padding: 0 #{20rpx};
            }

            .buy-btn-radius {
                border-radius: #{24rpx};
            }

            .buy-btn-border {
                border: #{1rpx} solid;
            }

            .goods-tag {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                width: #{64rpx};
                height: #{64rpx};
            }

            .original-price {
                font-size: $uni-font-size-weak-two;
                color: $uni-general-color-two;
                text-decoration: line-through;
            }

            .tag {
                padding: 0 #{10rpx};
                margin-right: #{8rpx};
                font-size: #{20rpx};
                line-height: 1;
                border-radius: #{28rpx};
                border: #{1rpx} solid;
                transform: rotateZ(360deg);
            }

            .timer {
                width: 100%;
            }

            .pintuan-tag {
                font-size: $uni-font-size-weak-two;
                margin: #{16rpx} #{12rpx} 0 0;
                padding: 0 #{24rpx};

                .people {
                    width: #{70rpx};
                    text-align: center;
                    border: #{1rpx} solid;
                    border-radius: #{2rpx};
                    padding: #{2rpx} 0;
                }
            }
        }

        .app-list-mode {
            margin-bottom: #{32rpx};
            position: relative;
            border-radius: #{16rpx};

            .name {
                font-size: #{28rpx};
                color: #353535;
                line-height: #{38rpx};
            }

            .right {
                height: #{220rpx};
            }

            &:last-child {
                margin-bottom: 0;
            }

            .pintuan-tag {
                padding: 0;
            }

            .out-dialog {
                width: #{220rpx};
                height: 100%;
                position: absolute;
                z-index: 11;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, .5);

                image {
                    width: #{220rpx};
                    height: #{220rpx};
                }
            }
        }

        .app-column-1 {
            padding-bottom: #{24rpx};
            border-radius: #{16rpx};

            .out-dialog {
                width: 100%;
                height: #{702rpx};
                z-index: 11;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, .5);

                image {
                    width: #{702rpx};
                    height: #{702rpx};
                }
            }

            .goods-name {
                margin-top: #{28rpx};
                padding: 0 #{24rpx};
                font-size: #{28rpx};
                color: #353535;
                line-height: #{38rpx};
            }

            .price {
                margin-top: #{16rpx};
                padding: 0 #{24rpx};
                max-width: #{702rpx};

                .member-price {
                    margin-left: #{10rpx};
                }
            }

            .timer {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 10;
            }

            .pintuan-tag {
                margin: 0;
                padding-left: 0;
            }
        }

        .app-column-1-mar {
            margin-bottom: #{24rpx};
        }

        &.column-2 {
            padding: #{24rpx} #{23rpx} 0 #{23rpx};
            margin-bottom: #{-24rpx};
            .app-column-2 {
                margin-bottom: #{24rpx};
                padding-bottom: #{24rpx};
                border-radius: #{16rpx};
                //width: #{346rpx};

                .out-dialog {
                    width: 100%;
                    height: #{342rpx};
                    position: absolute;
                    z-index: 11;
                    top: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, .5);

                    image {
                        width: #{342rpx};
                        height: #{342rpx};
                    }
                }

                .goods-name {
                    font-size: #{28rpx};
                    color: #353535;
                    margin-top: #{24rpx};
                    padding: 0 #{24rpx};
                    width: inherit;
                    line-height: #{38rpx};
                }

                .price {
                    margin-top: #{16rpx};
                    padding: 0 #{24rpx};
                    max-width: #{344rpx};
                }

                .pintuan-tag ~ .price {
                    margin-top: #{16rpx};
                }

                .timer {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: 10;
                }
            }
        }
    }
}

.des-price {
    display: inline-block;
    padding: #{0rpx 4rpx};
    border: #{1rpx} solid;
    border-radius: #{8rpx};
    font-size: #{20rpx};
    line-height: 1.2;
    transform: rotateZ(360deg);
}

.dir-tag-def {
    padding: 0 #{10rpx};
    margin-right: #{8rpx};
    /* #ifdef MP-BAIDU || MP-ALIPAY */
    padding: #{2rpx} #{18rpx};
    /* #endif */
    font-size: $uni-font-size-weak-two;
    border-radius: #{28rpx};
}

.seheight {
    height: #{110rpx};
    width: #{430rpx};
}

.default-text {
    color: #666666;
}

.tag-pick {
    padding: 0 #{10rpx};
    margin-right: #{8rpx};
    font-size: $uni-font-size-weak-two;
    border-radius: #{28rpx};
}

.goods-price {
    font-size: #{30upx};
    line-height: 1.1;
}

.app-percentage {
    height: #{20rpx};
    border-radius: #{12rpx};
    overflow: hidden;

    > view {
        height: #{20rpx};
        border-radius: #{12rpx};
    }
}

.flash-sale {
    padding: #{5rpx} #{10rpx};
    font-size: #{20rpx};
    color: #fff;
    line-height: 1;
    border-radius: #{14rpx};
    margin-right: #{10rpx};
    display: inline-block;
}

.flash-sale-dis {
    margin-bottom: #{10rpx};
}
</style>
